<template>
  <el-dialog title="导入数据" :visible.sync="show" @close="close" width="35%">
  <div>
    <a :href="templateUrl" style="margin-bottom: 10px;display: block">点击下载导入模板</a>
    <el-upload
               :limit=limitNum
               :auto-upload="false"
               accept=".xlsx,.xls"
               :action="UploadUrl()"
               :before-upload="beforeUploadFile"
               :on-change="fileChange"
               :on-exceed="exceedFile"
               :on-success="handleSuccess"
               :on-error="handleError"
               :file-list="fileList">
      <el-button size="small" type="primary">选择文件</el-button>
    </el-upload>
    <br/>
    <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
    <el-button size="small" @click="closeDialog">取消</el-button>

    <div style="margin-top: 10px;color:red" v-if="this.importMsg === 'insert'">
      导入前请注意以下几点:<br>
      1. 导入逻辑：增量导入；<br>
      2. 请确认文件是否已经关闭；<br>
      3. 不要修改导入模板中的列名，请注意导入表格中列名的批注；<br>
      4. 若导入文档大小超过1M且导入失败，请拆分成多个文档后重新导入
    </div>
    <div style="margin-top: 10px;color:red" v-else-if="this.importMsg === 'update'">
      导入前请注意以下几点:<br>
      1. 导入逻辑：覆盖更新，只更新系统已有数据，且空字段列的值不会被覆盖为空；<br>
      2. 导入时请关闭导入文档；<br>
      3. 不要修改导入模板中的列名，请注意导入表格中列名的批注；<br>
      4. 若导入文档大小超过1M且导入失败，请拆分成多个文档后重新导入
    </div>
    <div style="margin-top: 10px;color:red" v-else-if="this.importMsg === 'updateDealer'">
      导入前请注意以下几点:<br>
      1. 导入逻辑：覆盖更新，导入空值也会覆盖更新为空。以下情况除外：当“是否申请费用=是/是否SFA覆盖=是”，若新增供货方，则对应的TPcode/SFAcode可不填写，将按“MDM统一编码-供货方编码”自动生成。若变更供货方信息，对应的TPcode/SFAcode不填则保留原有code不变。<br>
      2. 导入时请关闭导入文档；<br>
      3. 不要修改导入模板中的列名，请注意导入表格中列名的批注；<br>
      4. 若导入文档大小超过1M且导入失败，请拆分成多个文档后重新导入
    </div>
    <div style="margin-top: 10px;color:red" v-else>
      导入前请注意以下几点:<br>
      1. 导入逻辑：增量导入；<br>
      2. 请确认文件是否已经关闭；<br>
      3. 不要修改导入模板中的列名，请注意导入表格中列名的批注；<br>
      4. 若导入文档大小超过1M且导入失败，请拆分成多个文档后重新导入
    </div>
  </div>
  </el-dialog>
</template>

<script>
    import axios from 'axios';
    import config from '@/config';
    import {Message,Loading} from 'element-ui'
    import {getToken} from "../../util";

    export default {
        props:{
            props:Array,
            outBtn:Object,
            inportUrl:String,
            templateUrl:String,
            fileKey: String,
            importMsg: String
        },
        data() {
            return {
                submit:{},
                limitNum: 1,  // 上传excell时，同时允许上传的最大数
                fileList: [],   // excel文件列表
                show:false,
                key: this.fileKey?this.fileKey:'importFile'
            }
        },
        methods:{
            // 文件超出个数限制时的钩子
            exceedFile(files, fileList) {
                this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`);
            },
            // 文件状态改变时的钩子
            fileChange(file, fileList) {
                this.fileList = fileList
            },
            // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
            beforeUploadFile(file) {
                console.log('before upload');
                console.log(file);
                let extension = file.name.substring(file.name.lastIndexOf('.')+1);
                let size = file.size / 1024 / 1024;
                if(extension !== 'xlsx') {
                    this.$message.warning('只能上传后缀是.xlsx的文件');
                }
                if(size > 10) {
                    this.$message.warning('文件大小不得超过10M');
                }
            },
            // 文件上传成功时的钩子
            handleSuccess(res, file, fileList) {
                this.$message.success('文件上传成功');
            },
            // 文件上传失败时的钩子
            handleError(err, file, fileList) {
                this.$message.error('文件上传失败');
            },
            UploadUrl:function(){
                // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
                return ""
            },
            uploadFile() {
                let token = getToken()
                if (this.fileList.length === 0){
                    this.$message.warning('请上传文件');
                } else {
                    let loading = loading = Loading.service({
                    		  lock: false,
                    		  text: '上传中...',
                    		  background:'rgba(255,255,255,0.5)',
                    })
                    let form = new FormData();
                    form.append(this.key, this.fileList[0].raw);
                    axios({
                        method:"post",
                        baseURL: process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro,
                        url:this.inportUrl,
                        headers:{
                            'Content-type': 'multipart/form-data',
                            'Token' : token
                        },
                        data:form
                    }).then(
                        res=>{
                          loading.close()
                          if (res.data.code != 200) {
                            Message({type: 'error', message: res.data.msg})
                          } else {
                            Message({type: 'success', message: res.data.msg})
                            this.close()
                          }
                        },err =>{
                            loading.close()
                            Message({type: 'error', message: '导入失败'})
                            this.close()
                        });
                }
            },
            closeDialog() {
                this.$emit("close",null)
            },
            close() {
                this.$emit("close",null)
            }
        },
        watch: {
            outBtn(newVal, oldVal) {
                if (newVal && newVal.event == 'inport()' ) {
                    this.show = true
                }

                if (!newVal) {
                    this.show = false
                }
            }
        }
    }

</script>

<style lang="less" scoped>
  /deep/.el-dialog{
    width: fit-content;
  }
</style>
